<script setup lang="ts">
    import { ref, onMounted, watch  } from 'vue' //导入vue函数
    import type { Category } from '@/model'//导入自定义数据类型
    import { getCategoryList } from '@/api' //导入axio接口

    //当前分类编号
    const params = defineProps(["id"])

    //当前分类数据对象
    const category = ref<Category>()

    //获得当前分类
    async function getCategory(){
        const res = await getCategoryList()
        category.value = res.data.data.filter((value:Category)=>value.id==params.id)[0]
    }

    //页面组件加载完成
    onMounted(()=>{
        getCategory()
    })

    //侦听params参数变化
    watch(params,()=>{
        getCategory()
    })
</script>

<template>
    <section>
        <div>
            <RouterLink to="/">首页</RouterLink> &raquo; {{ category?.name }}
        </div>
    </section>
</template>

<style scoped>
    section{
        background-color:#F5F5F5;
    }
    section > div{
        color:#666666;
        width:1200px;
        height:70px;
        line-height:70px;
        margin:0px auto;
    }
    section a{
        color:#333333;
        text-decoration: none;
    }
    section a:hover{
        color:#4799F6;
    }
</style>
